<template>
  <div class="resume-page">
    <!-- 简历页面头部 -->
    <section class="resume-header bg-bg-secondary py-16">
      <div class="layout-container">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
          <div class="md:col-span-2">
            <h1 class="text-4xl font-bold mb-4 text-text-primary resume-title">
              <span class="text-primary">个人简历</span>
            </h1>
            <p class="text-lg text-text-secondary mb-6 resume-description">
              全栈开发者，专注于现代Web技术和用户体验设计，拥有丰富的项目经验和团队协作能力。
            </p>
            <div class="flex flex-wrap gap-4 resume-buttons">
              <n-button type="primary" size="large" class="px-6">
                <n-icon class="mr-1">
                  <DownloadOutline />
                </n-icon>
                下载简历
              </n-button>
              <n-button ghost class="px-6" size="large">
                <n-icon class="mr-1">
                  <MailOutline />
                </n-icon>
                联系我
              </n-button>
            </div>
          </div>
          <div class="md:col-span-1 flex justify-center">
            <div class="avatar-container">
              <!-- <img
                src="/images/avatar.jpg"
                alt="个人头像"
                class="avatar-image rounded-full shadow-lg w-48 h-48 object-cover border-4 border-bg-secondary"
              /> -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 基本信息部分 -->
    <section class="basic-info py-12 bg-bg-primary">
      <div class="layout-container">
        <h2 class="section-title animate-item">基本信息</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div
            v-for="(info, index) in basicInfo"
            :key="index"
            class="info-card animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="flex items-center gap-4">
              <div class="icon-container">
                <n-icon size="24" class="text-primary">
                  <component :is="info.icon" />
                </n-icon>
              </div>
              <div>
                <h3 class="text-md font-medium text-text-secondary">
                  {{ info.label }}
                </h3>
                <p class="text-text-primary font-medium">{{ info.value }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 教育背景部分 -->
    <section class="education bg-bg-primary py-12">
      <div class="layout-container">
        <h2 class="section-title animate-item">教育背景</h2>
        <div class="timeline">
          <div
            v-for="(edu, index) in education"
            :key="index"
            class="timeline-item animate-item"
            :style="{ animationDelay: `${index * 0.15}s` }"
          >
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <div class="card">
                <div class="flex justify-between flex-wrap mb-2">
                  <h3 class="text-xl font-bold text-text-primary">
                    {{ edu.school }}
                  </h3>
                  <span class="text-primary font-medium">{{ edu.period }}</span>
                </div>
                <p class="text-text-secondary mb-1">{{ edu.degree }}</p>
                <p class="text-text-secondary">{{ edu.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 工作经验部分 -->
    <section class="experience py-12 bg-bg-primary">
      <div class="layout-container">
        <h2 class="section-title animate-item">工作经验</h2>
        <div class="timeline">
          <div
            v-for="(exp, index) in experience"
            :key="index"
            class="timeline-item animate-item"
            :style="{ animationDelay: `${index * 0.15}s` }"
          >
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <div class="card">
                <div class="flex justify-between flex-wrap mb-2">
                  <h3 class="text-xl font-bold text-text-primary">
                    {{ exp.company }}
                  </h3>
                  <span class="text-primary font-medium">{{ exp.period }}</span>
                </div>
                <p class="text-text-secondary font-medium mb-2">
                  {{ exp.position }}
                </p>
                <p class="text-text-secondary mb-4">{{ exp.description }}</p>
                <div class="flex flex-wrap gap-2">
                  <n-tag
                    v-for="(tag, tagIndex) in exp.tags"
                    :key="tagIndex"
                    size="small"
                    class="tag"
                  >
                    {{ tag }}
                  </n-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技能部分 -->
    <section class="skills bg-bg-primary py-12">
      <div class="layout-container">
        <h2 class="section-title animate-item">专业技能</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div
            v-for="(category, index) in skills"
            :key="index"
            class="skill-category animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <h3 class="text-xl font-bold mb-4 text-text-primary">
              {{ category.category }}
            </h3>
            <div class="space-y-4">
              <div
                v-for="(skill, skillIndex) in category.items"
                :key="skillIndex"
                class="skill-item"
              >
                <div class="flex justify-between mb-1">
                  <span class="text-text-secondary">{{ skill.name }}</span>
                  <span class="text-primary font-medium">{{
                    skill.level
                  }}</span>
                </div>
                <n-progress
                  type="line"
                  :percentage="skill.percentage"
                  :color="'var(--primary-color)'"
                  :height="8"
                  :border-radius="4"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 项目经验部分 -->
    <section class="projects py-12 bg-bg-primary">
      <div class="layout-container">
        <h2 class="section-title animate-item">项目经验</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="(project, index) in projects"
            :key="index"
            class="project-card animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="card h-full flex flex-col">
              <div class="project-image-container mb-4">
                <img
                  :src="project.image"
                  :alt="project.name"
                  class="project-image rounded-lg w-full h-48 object-cover"
                />
              </div>
              <h3 class="text-xl font-bold mb-2 text-text-primary">
                {{ project.name }}
              </h3>
              <p class="text-text-secondary mb-4 flex-grow">
                {{ project.description }}
              </p>
              <div class="flex flex-wrap gap-2 mb-4">
                <n-tag
                  v-for="(tech, techIndex) in project.technologies"
                  :key="techIndex"
                  size="small"
                  class="tag"
                >
                  {{ tech }}
                </n-tag>
              </div>
              <div class="flex gap-4">
                <n-button
                  v-if="project.demoUrl"
                  quaternary
                  size="small"
                  tag="a"
                  :href="project.demoUrl"
                  target="_blank"
                >
                  <n-icon class="mr-1">
                    <EyeOutline />
                  </n-icon>
                  预览
                </n-button>
                <n-button
                  v-if="project.githubUrl"
                  quaternary
                  size="small"
                  tag="a"
                  :href="project.githubUrl"
                  target="_blank"
                >
                  <n-icon class="mr-1">
                    <LogoGithub />
                  </n-icon>
                  代码
                </n-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  MailOutline,
  PhonePortraitOutline,
  LocationOutline,
  CalendarOutline,
  PersonOutline,
  LanguageOutline,
  DownloadOutline,
  EyeOutline,
  LogoGithub,
} from "@vicons/ionicons5";

// 基本信息
const basicInfo = [
  { label: "电子邮箱", value: "your.email@example.com", icon: MailOutline },
  { label: "电话", value: "+86 138 0000 0000", icon: PhonePortraitOutline },
  { label: "地址", value: "北京市朝阳区", icon: LocationOutline },
  { label: "出生日期", value: "1990年1月1日", icon: CalendarOutline },
  { label: "国籍", value: "中国", icon: LanguageOutline },
  { label: "职业", value: "全栈开发工程师", icon: PersonOutline },
];

// 教育背景
const education = [
  {
    school: "北京大学",
    degree: "计算机科学与技术 硕士",
    period: "2015 - 2018",
    description: "专注于Web开发和人工智能研究，获得国家奖学金。",
  },
  {
    school: "清华大学",
    degree: "计算机科学与技术 学士",
    period: "2011 - 2015",
    description: "GPA 3.8/4.0，主修计算机科学，辅修数学。",
  },
];

// 工作经验
const experience = [
  {
    company: "腾讯科技",
    position: "高级前端开发工程师",
    period: "2020 - 至今",
    description:
      "负责设计和开发公司的核心Web应用，优化前端性能，提升用户体验。主导了多个项目的技术选型和架构设计，引入现代化的开发流程。",
    tags: ["Vue.js", "Typescript", "Nuxt.js", "TailwindCSS", "微前端"],
  },
  {
    company: "阿里巴巴",
    position: "前端开发工程师",
    period: "2018 - 2020",
    description:
      "参与电商平台的前端开发，负责购物车和支付模块的实现和优化。开发了团队内部使用的UI组件库，提高了开发效率。",
    tags: ["React", "Redux", "Ant Design", "Webpack", "Node.js"],
  },
  {
    company: "百度科技",
    position: "实习生",
    period: "2017 - 2018",
    description:
      "参与百度地图Web版的开发，主要负责UI组件的实现和优化。学习了大型项目的开发流程和团队协作方式。",
    tags: ["JavaScript", "CSS3", "HTML5", "Git"],
  },
];

// 技能
const skills = [
  {
    category: "前端开发",
    items: [
      { name: "Vue.js", level: "精通", percentage: 95 },
      { name: "React", level: "熟练", percentage: 85 },
      { name: "TypeScript", level: "精通", percentage: 90 },
      { name: "HTML5/CSS3", level: "精通", percentage: 95 },
    ],
  },
  {
    category: "后端开发",
    items: [
      { name: "Node.js", level: "熟练", percentage: 80 },
      { name: "Python", level: "熟练", percentage: 75 },
      { name: "Java", level: "了解", percentage: 60 },
      { name: "数据库", level: "熟练", percentage: 85 },
    ],
  },
  {
    category: "开发工具",
    items: [
      { name: "Git", level: "精通", percentage: 95 },
      { name: "Docker", level: "熟练", percentage: 80 },
      { name: "CI/CD", level: "熟练", percentage: 85 },
      { name: "测试", level: "熟练", percentage: 75 },
    ],
  },
  {
    category: "设计能力",
    items: [
      { name: "UI设计", level: "熟练", percentage: 80 },
      { name: "UX设计", level: "熟练", percentage: 85 },
      { name: "响应式设计", level: "精通", percentage: 90 },
      { name: "动效设计", level: "了解", percentage: 70 },
    ],
  },
];

// 项目经验
const projects = [
  {
    name: "电商平台重构",
    description:
      "使用Vue 3和TypeScript重构旧版电商平台，引入微前端架构，提升了50%的页面加载速度。",
    technologies: ["Vue 3", "TypeScript", "Micro-frontend", "TailwindCSS"],
    image: "/images/project1.jpg",
    demoUrl: "https://example.com/demo1",
    githubUrl: "https://github.com/example/project1",
  },
  {
    name: "企业内容管理系统",
    description:
      "开发了一个企业内容管理系统，支持多角色权限管理，文档协作和版本控制。",
    technologies: ["React", "Redux", "Node.js", "MongoDB"],
    image: "/images/project2.jpg",
    demoUrl: "https://example.com/demo2",
    githubUrl: "https://github.com/example/project2",
  },
  {
    name: "健康数据可视化平台",
    description:
      "设计并实现了一个健康数据可视化平台，帮助用户直观地了解自己的健康状况。",
    technologies: ["D3.js", "Vue.js", "Express", "PostgreSQL"],
    image: "/images/project3.jpg",
    demoUrl: "https://example.com/demo3",
    githubUrl: "https://github.com/example/project3",
  },
];

// 联系信息
const contactInfo = [
  { label: "电子邮箱", value: "your.email@example.com", icon: MailOutline },
  { label: "电话", value: "+86 138 0000 0000", icon: PhonePortraitOutline },
  { label: "地址", value: "北京市朝阳区", icon: LocationOutline },
];

// 使用 Intersection Observer 监测元素是否进入视口
onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("animate-visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.1 }
  );

  // 观察所有需要动画的元素
  document.querySelectorAll(".animate-item").forEach((item) => {
    observer.observe(item);
  });
});
</script>

<style scoped>
.resume-page {
  color: var(--text-primary);
}

/* 标题样式 */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  color: var(--text-primary);
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

/* 卡片样式 */
.card {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 简历头部样式 */
.resume-header {
  position: relative;
  overflow: hidden;
}

.resume-title {
  animation: fadeInUp 0.8s ease-out;
}

.resume-description {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.resume-buttons {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.avatar-container {
  animation: fadeInRight 1s ease-out 0.3s both;
}

/* 信息卡片样式 */
.info-card {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.icon-container {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 50%;
}

/* 时间线样式 */
.timeline {
  position: relative;
  margin-left: 20px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: var(--primary-color);
  opacity: 0.3;
}

.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 2rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--primary-color);
  top: 25px;
}

/* 标签样式 */
.tag {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--primary-color);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8rem;
}

/* 项目卡片中的图片 */
.project-image-container {
  overflow: hidden;
  border-radius: 8px;
}

.project-image {
  transition: transform 0.5s ease;
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

/* 滚动触发动画 */
.animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 改进简历页移动端体验 */
@media (max-width: 768px) {
  /* 调整时间线项目间距 */
  .timeline-item {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .timeline-item::before {
    left: 0;
  }

  /* 确保工作经验卡片在移动端完整显示 */
  .experience-content {
    padding: 1rem;
  }

  /* 调整技能展示 */
  .skill-category {
    margin-bottom: 2rem;
  }

  /* 调整动画效果，减少移动端滚动抖动 */
  .animate-item {
    transform: translateY(15px);
  }
}
</style>
